/*
 * @Author: jiameng15
 * @Date: 2020-03-04 22:47:07
 * @Last Modified by: jiameng15
 * @Last Modified time: 2020-04-14 20:27:31
 */
<template>
  <div>
    <div class="row-header">
      <el-form ref="searchForm" :model="searchForm" label-width="50px" inline>
        <el-form-item label=" " prop="startDate">
          <el-date-picker style="width: 400px" v-model="startDate" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="下单起始日期" end-placeholder="下单结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions" @change="changeStartDate"></el-date-picker>
        </el-form-item>
        <el-form-item label=" " prop="endDate">
          <el-date-picker style="width: 400px" v-model="endDate" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="订单完成起始日期" end-placeholder="订单完成结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions" @change="changeEndDate"></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 300px" label=" " prop="dictOutType">
          <el-select size="small" placeholder="请选择商品类型" style="width: 100%;" v-model="searchForm.dictGoodsType" clearable>
            <el-option value="SHORT_MESSAGE" label="短信" v-if="isShotMessage"></el-option>
            <el-option value="PC" label="PC端"></el-option>
            <el-option value="C" label="C端"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="mini" icon="el-icon-search" @click="beforeinitData">查询</el-button>
        <el-button size="mini"  type="shenda"   icon="el-icon-refresh-right" @click="resetForm('searchForm')">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="mini"   @click="initData">刷新数据 <i class="el-icon-refresh"></i></el-button>
      <el-table :data="tableData" align="center" ref="table" class="row-main-table" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                 v-loading.fullscreen="mainTableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column prop="dictStatusName" label="订单状态"></el-table-column>
        <el-table-column prop="dealTime" label="成交时间"></el-table-column>
        <el-table-column prop="oemOrderAmount" label="订单金额"></el-table-column>
        <el-table-column prop="buyNumber" label="购买数量"></el-table-column>
        <el-table-column prop="packegeNumber" label="规格 "></el-table-column>
        <el-table-column prop="goodsName" label="商品名称 "></el-table-column>
        <el-table-column prop="dictGoodsTypeName" label="商品类型 "></el-table-column>
        <el-table-column prop="insertTime" label="购买时间 "></el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.size"
          :total="page.total"
          :current-page="page.current"
          layout="total, sizes, prev, pager, next, jumper"
          class="row-main-pager">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
  import {
    getOrderList,// 获取购买记录
  } from '@/api/getData'
  import {getStore, setStore} from '@/config/mUtils'
  import {subStringForExceptLetter} from '@/utils/utils'
  import Editor from '@/components/Editor'

  var qiniu = require('qiniu-js')
  var imgUrl = localStorage.getItem('image')
  export default {
    name: 'OrderList',
    data() {

      return {
        loading: false,
        // 抽屉
        noticeTitle:'',
        drawer: false,
        direction:'ttb',
        typeList: [
          { label: 'PC端', value: 'PC' },
          { label: 'C端', value: 'C' }
        ],
        startDate:[],
        endDate:[],
        // 查询条件
        searchForm:{
          goodsName:'',               //商品名称
          dictGoodsType:'',      //商品类型 选择框  pc端为PC   C端为 C
          startTime:'',  // 下单开始时间
          endTime:'',    // 下单结束时间
          dealStratTime:'',// 订单完成起始时间
          dealEndTime:''// 订单完成结束时间
        },
        searchLoading: false,
        mainTableLoading:false,
        isShotMessage:false,
        // 分页
        page: {
          current: 1,
          size: 10,
          total: 0,
          ascs: [],
          descs: [],
        },
        //
        tablePage: {
          pageSize: 15,
          pageSizes: [5, 15, 20, 50, 100, 200, 500, 1000]
        },
        tableData: [],
        value: false,
        tableLoading: false,
        id: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    components: {
      Editor
    },
    watch: {

    },
    created() {
      if(this.$route.path==='/ShortMessage/orders'){
        this.isShotMessage = true
        this.searchForm.dictGoodsType = 'SHORT_MESSAGE'
      }
      let searchObj=sessionStorage.getItem(this.$route.path)
      // console.log(searchObj)
      if(searchObj!=undefined&&searchObj!=null&&searchObj!=''){
        this.searchForm = JSON.parse(searchObj)
        // console.log(this.searchForm)
        if(this.searchForm.startTime!==''){
          this.startDate.push(this.searchForm.startTime)
        }
        if(this.searchForm.endTime!==''){
          this.startDate.push(this.searchForm.endTime)
        }
        if(this.searchForm.dealStratTime!==''){
          this.endDate.push(this.searchForm.dealStratTime)
        }
        if(this.searchForm.dealEndTime!==''){
          this.endDate.push(this.searchForm.dealEndTime)
        }
        this.page = this.searchForm.page
      }
      this.initData()
    },

    methods: {
      beforeinitData(){
        this.page.current = 1
        this.initData()
      },
      async initData(theKey) {
        this.mainTableLoading = true;
        this.searchForm.page = this.page;
        sessionStorage.setItem(this.$route.path,JSON.stringify(this.searchForm))
        const returnData = await getOrderList(this.searchForm, {
          obj: this,
          key: 'tableLoading;' + theKey
        })

        this.tableData = []
        if (returnData._result) {
          // 数据回显
          returnData.data.records.map(item => {
            const data = {}
            // data.oemId = item.oemId
            data.dictStatus = item.dictStatus
            data.dictStatusName = item.dictStatusName
            data.dealTime = item.dealTime
            data.goodsName = item.goodsName
            data.dictGoodsType = item.dictGoodsType
            data.dictGoodsTypeName = item.dictGoodsTypeName
            data.dictNoticeType = item.dictNoticeType
            data.dictNoticeTypeName = item.dictNoticeTypeName
            data.oemOrderAmount = item.oemOrderAmount
            data.buyNumber = item.buyNumber
            data.packegeNumber = item.packegeNumber
            data.insertTime = item.insertTime
            this.tableData.push(data)
          })
          this.tableLoading = false
          this.page.total = returnData.data.total
        }
        this.mainTableLoading = false;
      },
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.startDate = []
        this.endDate = []
        this.searchForm = {
          goodsName:'',      // 商品名称
          dictGoodsType:'',  // 商品类型 选择框
          startTime:'',      // 下单开始时间
          endTime:'',        // 下单结束时间
          dealStratTime:'',  // 订单完成起始时间
          dealEndTime:'',    // 订单完成结束时间
        }
        if(this.isShotMessage){
          this.searchForm.dictGoodsType = 'SHORT_MESSAGE'
        }
      },

      changeStartDate(){
        // console.log(this.startDate)
        if(this.startDate){
          this.searchForm.startTime = this.startDate[0]
          this.searchForm.endTime = this.startDate[1]
        }else{
          this.searchForm.startTime = ''
          this.searchForm.endTime = ''
        }
      },
      changeEndDate(){
        // console.log(this.endDate)
        if(this.endDate){
          this.searchForm.dealStratTime = this.endDate[0]
          this.searchForm.dealEndTime = this.endDate[1]
        }else{
          this.searchForm.dealStratTime = ''
          this.searchForm.dealEndTime = ''
        }
      },

      handleCurrentChange(currentPage) {
        this.page.current = currentPage;
        this.initData()
      },
      handleSizeChange(pageSize){
        this.page.current = 1;
        this.page.size = pageSize;
        this.initData()
      }
    },
  }
</script>
<style scoped lang="scss">

  .drawer_form{
    padding: 50px;
    overflow-y:auto;
  }
  .notice_drawer_form{
    width:100%;
  }
  .recentAdd li {
    list-style: none;
    float: left;
    margin-right: 5px;
    line-height: 15px;
  }

</style>
<style>
.el-drawer.ttb{
  width: 800px;
  left: 50%;
  margin-left: -400px;
  /* right:50%; */
}
</style>
